import { ProductVariantDialogComponent } from './../product-variant-dialog/product-variant-dialog.component';
import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';
import { ProductService } from '../../service/product.service';
import { Observable, Subscription } from 'rxjs';
import { ProductDetail, ReceivingOrder } from 'src/app/shared/domain';
import { map } from 'rxjs/operators';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-product-container',
  templateUrl: './product-container.component.html',
  styleUrls: ['./product-container.component.less'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ProductContainerComponent implements OnInit {
  productDetail$!: Observable<ProductDetail>;
  productId$!: Observable<string>;
  receivingOrder$!: Observable<ReceivingOrder[]>;
  sub!: Subscription;
  visible: boolean = false;
  id!: string;
  constructor(private product: ProductService, private route: ActivatedRoute) {}

  ngOnInit() {
    this.productId$ = this.route.url.pipe(map((val) => val[0].path));
    this.sub = this.productId$.subscribe((id) => {
      this.id = id;
      this.getDetail(id);
    });
    this.receivingOrder$ = this.getReceiving();
  }
  ngOnDestroy(): void {
    this.sub.unsubscribe();
  }
  getDetail(id: string) {
    this.productDetail$ = this.product
      .handleGetProductDetail(id)
      .pipe(map(({ data }: any) => data));
  }
  getReceiving() {
    return this.product.handleGetReceivingOrder();
  }
  handleClick() {
    this.visible = true;
  }
  handleCancel() {
    this.visible = false;
  }
}
